<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">用户查询</h3>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="userName" @clear="searchUser">
                        <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="readyAdd">添加用户</el-button>
                </el-col>
            </el-row>
        </el-card>
      <el-card style="margin-top: 30px">
            <el-table :data="userList" border stripe>
                <el-table-column type="index"></el-table-column>
              <el-table-column label="姓名" prop="userName"></el-table-column>
              <el-table-column label="手机号" prop="cellphone"></el-table-column>
              <el-table-column label="邮箱" prop="email"></el-table-column>
              <el-table-column label="角色">
                <template slot-scope="scope">{{getRoleNames(scope.row.roles)}}</template>
              </el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button type="info" size="mini" @click="showRoleDialog(scope.row)">授权</el-button>
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

<!--        &lt;!&ndash;修改用戶&ndash;&gt;
       <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                :close-on-click-modal="false"
                @close="editUserFormClose"
        >
            <el-form
                    :model="editUserForm"
                    :rules="editUserFormRules"
                    ref="editUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >

                <el-form-item label="用戶名" prop="userName">
                    <el-input v-model="editUserForm.userName"></el-input>
                </el-form-item>
&lt;!&ndash;              <el-form-item label="密码" prop="userPassword">
                <el-input v-model="editUserForm.userPassword" type="text"></el-input>
              </el-form-item>&ndash;&gt;
                <el-form-item label="手机" prop="cellphone">
                    <el-input v-model="editUserForm.cellphone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editUserForm.email"></el-input>
                </el-form-item>

&lt;!&ndash;                <el-form-item label="角色" prop="role">
                    <el-select v-model="userRoleList" multiple placeholder="请选择角色">
                        <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>&ndash;&gt;
                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="editUserForm.locked" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editUser">确 定</el-button>
        <el-button @click="editUserFormClose">取 消</el-button>
      </span>
        </el-dialog>-->

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                userList: [],
                roleList: [], //系统中所有的角色
                total: 9,
                userName: "",
                addDialogVisible: false,
                addUserForm: {
                    userName: "",
                    userCode: "",
                    userPassword: "",
                    locked: "0",
                    email: "",
                    cellphone: ""
                },
                addUserFormRules: {
                     userCode: [
                       { required: true, message: "請輸入工号", trigger: "blur" },
                       { min: 4, max: 4, message: "工号必须是4个字符", trigger: "blur" }
                     ],
                     userName: [
                       { required: true, message: "請輸入用戶名", trigger: "blur" },
                       { min: 3, max: 8, message: "用戶名在3-8個字符之間", trigger: "blur" }
                     ],
                     userPassword: [
                       { required: true, message: "請輸入密碼", trigger: "blur" },
                       { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                     ],
                    // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
                     locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                }
            };
        },
        methods: {


          showRoleDialog(row) {

          },
            removeUserById(id) {
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {

                  }
                ).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });

            },



          readyAdd(){
            this.addDialogVisible=true;
          },
            addUser() {
              this.$refs.addUserFormRef.validate(valid=>{
                if (!valid){
                  return ;
                }

              })

            },
            addUserFormClose() {
                this.$refs.addUserFormRef.resetFields();
                this.userRoleList = [];
                this.addUserForm.deptId = "";
                this.addUserForm.roleIds = "";
                this.addDialogVisible=false;
            },
            getUserList() {
              let url = "manager/queryAllManager";
              this.$axios.get(url,{
                params:{
                  name:this.userName,
                  now:this.pageNum,
                  size:this.pageSize
                }
              }).then(res=>{
                if (res.data.code == 103){
                  console.log(res)
                  this.userList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });

            },
            getRoleList() {
              let url = "role/queryRole";
              this.$axios.get(url).then(res=>{
                if (res.data.code == 103){
                  this.roleList = res.data.data;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });

            },
            searchUser() {
                this.pageNum = 1;
                this.getUserList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getUserList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getUserList();
            },
            //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
            getRoleNames(arr) {
                if (!arr) return;
                let roleNameArr = new Array();
                for (let i = 0; i < arr.length; i++) {
                    roleNameArr.push(arr[i].name);
                }
                return roleNameArr.join(",");
            },

            reloadData() {
                this.searchUser();
                this.getRoleList();
                this.getUserList()
            }
        },
        created() {
            this.reloadData();

        }
    };
</script>
<style lang="less" scoped>
</style>